<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link href="../css/mui.min.css" rel="stylesheet" />
		<style>
			html,
			body {
				height: 100%;
				margin: 0px;
				padding: 0px;
				overflow: hidden;
				-webkit-touch-callout: none;
				-webkit-user-select: none;
			}
			.mui-bar{
				background: #FE635F;
			}
			.mui-switch{
				width: 51px;
				height: 25px;
			}
			.mui-switch .mui-switch-handle{
				width: 23px;
				height: 23px;
			}
			.mui-switch:before{
				content: "";
			}
			.mui-switch.mui-active:before{
				
				content: "";
			}
		a,.mui-title{
			color: #FFFFFF;
		}
		.mui-content{
			position: relative;
			float: left;
			width: 100%;
			padding: 0px  0px;
			display: inline-block;
			background: #FFFFFF;
		}		
		.hudan{
			position: relative;
			float: left;
			width: 100%;
			height: 60px;
			padding: 0  15px;
			box-sizing: border-box;
		}
		
		.hudan>div:nth-child(1){
			position: relative;
			float: left;
			width: 50%;
			text-align: left;
			font-size:17px;
             font-weight:500;
             color:rgba(51,51,51,1);
             line-height:60px;
		}		
		.hudan>div:nth-child(2){	
		position: relative;
		float: left;
		width: 50%;
		height: 100%;	
		padding-top: 20px;
		box-sizing: border-box;
		}	
		
		.hudan>div:nth-child(2)>img{
			position: relative;
			float: right;
			width: 22px;
			height: 22px;
		}	
			
		.hudan>div:nth-child(2)>span{
				position: relative;
				float: right;
				width: calc(100% - 22px);
				height: 100%;
				text-align: right;
				font-size:15px;
                font-weight:400;
                color:rgba(153,153,153,1);
				display: inline-block;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
			
			.hang{
				position: relative;
				float: left;
				width: 100%;
				height: 10px;
				margin-top: 5px;
			background:rgba(248,248,248,1);
			}
			
			.huimgs {
				position: relative;
				float: left;
				width: 100%;
				height: 100px;
				padding: 15px  15px;
				box-sizing: border-box;
			}
			
			
			.huimgs >div{
				width: 55px;
				height: 100%;
				text-align: center;
				position: relative;
				float: left;
				margin-left: calc((100% - 275px) / 6);
			}
			.huimgs >div>img{
				width: 55px;
				height: 55px;
				border-radius: 50%;
			}
			.huimgs >div>div{
				position: relative;
				float: left;
				width: 100%;
				font-size:13px;
				text-align: center;
                font-weight:400;
                color:rgba(102,102,102,1);
                line-height:23px;
				
			}
			
			.xina{
				border-bottom: 1px  solid  rgba(248,248,248,1);
			}
			
			#switch,#switchs{
				position: relative;
				list-style: none;
				
			}
			
			.mui-switch.mui-active{
				border-color: #FE635F;
				background: #FE635F;
			}
			#exit  {
				position: fixed;
                z-index: 1;
				width: 100%;
				bottom: 20px;	
				padding: 0  15px;
				box-sizing: border-box;
			}
			#exit >div{
				position: relative;
				float: left;
				width: 100%;
				text-align: center;
				font-size:16px;
				background:linear-gradient(180deg,rgba(252,126,119,1) 0%,rgba(254,96,93,1) 100%);
                box-shadow:0px 5px 8px 0px rgba(254, 95, 99, 0.35);
                border-radius:43px;
                font-weight:bold;
                color:rgba(255,255,255,1);
                line-height: 43px;
			}
		.mui-switch.mui-active .mui-switch-handle {
		    -webkit-transform: translate(43px,0);
		    transform: translate(24px,0)!important;
		}
			
		</style>
	</head>

	<body contextmenu="return false;">
   <header class="mui-bar mui-bar-nav">
   	<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
   	<h1 class="mui-title">群资料</h1>
   </header>		
		<div class="mui-content"  id="content">
		 <div class="hudan"><div>群聊成员</div><div  class="numbers"><img  src="../image/youjiantou.png" /><span id='zongrenshu'>13人</span></div></div>
		 <div  class='huimgs'>
			 <!-- <div>
				 <img  src="../image/touxiangmy.png" /><div>李雪儿</div>
			 </div>
			  <div>
			 				 <img  src="../image/touxiangmy.png" /><div>李雪儿</div>
			 </div>
			  <div>
			 				 <img  src="../image/touxiangmy.png" /><div>李雪儿</div>
			 </div>
			 
			  <div>
			 				 <img  src="../image/touxiangmy.png" /><div>李雪儿</div>
			 </div>
			 
			  <div>
			 				 <img  src="../image/touxiangmy.png" /><div>李雪儿</div>
			 </div> -->
		 </div>
		<div  class="hang"></div>
		<div class="hudan xina"><div>群聊名称</div><div class="groupname"><img  src="../image/youjiantou.png" /><span id="qunmingchen">Beautify福利群</span></div></div>
		<div class="hudan"><div>群公告</div><div class="notice"><img  src="../image/youjiantou.png" /><span id="gonggao">希望大家在群里面和谐交流，创建一个平等互助的环境，欢迎常来群里面聊哦！</span></div></div>
		<div  class="hang"></div>
			<li id="switch" class="mui-table-view-cell">
				置顶聊天
				<div class="mui-switch" id="zhiding">
					<div class="mui-switch-handle"></div>
				</div>
			</li>
			
			<li id="switchs" class="mui-table-view-cell">
				不许任何人进入
				<div class="mui-switch" id="jinzhi">
					<div class="mui-switch-handle"></div>
				</div>
			</li>
		<div class="hudan"><div>我在本群的昵称</div><div class="nickname"><img  src="../image/youjiantou.png" /><span id='mynicheng'>张雪</span></div></div>		
		<div id="exit"><div>退出该群聊</div></div>
		</div>
	</body>
		<script src="../js/mui.min.js"></script>
		<script src="../js/jquery-3.1.1.min.js"></script>
		<script type="text/javascript" charset="utf-8">
			
			
			
			
			window.addEventListener("refresh", function (e) {
				location.reload();
				});
			
			mui.plusReady(function(){
				var url = plus.storage.getItem('url');
				var user = plus.storage.getItem('user');
				user = JSON.parse(user);
				var web = plus.webview.currentWebview();
				var qunid = web.qunid;
				var zhiding = 0;
				var jinzhi = 0;
				var qunzhu = 0;
				mui.post(url+'/juyou/Grouping/getquns',{token:user.token,qunid:qunid},function(res){
					if(res.code==200){
						var data = res.data;
						var str = '';
						$("#zongrenshu").text(data.ren.total+'人')
						$("#qunmingchen").text(data.qun.name)
						$("#gonggao").text(data.qun.notices);
						if(data.wde.ziding==1){
							$("#zhiding").addClass('mui-active');
							zhiding = 1;
						}else{
							zhiding = 0;
						}
						if(data.qun.jingzhi==1){
							$("#jinzhi").addClass('mui-active');
							jinzhi = 1;
						}else{
							jinzhi = 0;
						}
						if(data.qun.group_owner.id==user.id){
							qunzhu = 1
						}
						$("#mynicheng").text(data.wde.name)
						mui.each(data.ren.data,function(i,v){
							str+='<div>'+
									 '<img  src="'+v.user.touxiang+'" /><div>'+v.name+'</div>'+
								 '</div>';
						})
						$(".huimgs").empty();
						$(".huimgs").append(str);
					}else{
						mui.toast(res.msg);
					}
				})
				
				//改变置顶
				document.getElementById("zhiding").addEventListener('toggle', function(event) {
						if(zhiding==1){
							zhiding =0;
						}else{
							zhiding = 1;
						}
						mui.post(url+'/juyou/Grouping/changequnzhiding',{token:user.token,qunid:qunid,zhiding:zhiding},function(res){
							if(res.code==200){
								mui.toast(res.msg);
							}else{
								mui.toast(res.msg);
								setTimeout(function(){
									location.reload();
								},1500)
							}
						})
					});
				//改变禁止加入
				document.getElementById("jinzhi").addEventListener('toggle', function(event) {
						if(jinzhi==1){
							jinzhi =0;
						}else{
							jinzhi = 1;
						}
						mui.post(url+'/juyou/Grouping/changequnjingzhi',{token:user.token,qunid:qunid,jingzhi:jinzhi},function(res){
							if(res.code==200){
								mui.toast(res.msg);
							}else{
								mui.toast(res.msg);
								setTimeout(function(){
									location.reload();
								},1500)
							}
						})
					});
				//解散群
				mui('#content').on('tap','#exit',function(res){
					var str = $("#exit").children().eq(0).text();
					str = '你确定'+str+'吗？';
					if(qunzhu==1){
						str = '你是群主,你退出后会选择第二个加入群的人作为群主!你确定吗？'
					}
					mui.confirm(str,'提示',['取消','确认'],function (e) {
						if(e.index==1){
							mui.post(url+'/juyou/Grouping/delqun',{token:user.token,qunid:qunid},function(res){
								if(res.code==200){
									mui.toast(res.msg);
									setTimeout(function(){
										var pageId = "sub4.html";
										var shuxin = plus.webview.getWebviewById('sub4.html');
										shuxin.reload();
										var  pageidqunliao="qunliaosub4.html";
										var pagedangqian=plus.webview.currentWebview();
										pagedangqian.close();
								var pagedd = plus.webview.getWebviewById(pageidqunliao);//刷新页面
								pagedd.close();
										
										mui.back()
									},1500)
								}else{
									mui.toast(res.msg);
								}
							})
						}
						
					},'div')
				})
				
				
				mui.init({
					beforeback: function() {　　　　
					var list = plus.webview.currentWebview().opener();　　　　
						  //refresh是A页面自定义事件
					mui.fire(list, 'refreshdwwww');
						 //返回true,继续页面关闭逻辑
					return true;
					},
				});
				
				
						  // 全部成员
						  mui("#content").on("tap",".numbers",function(){
							mui.openWindow({
								url:'qunmembersub4.html',
								id:"qunmembersub4.html",
								extras: {
									qunid:qunid
								// src:'../video/shiyong.mp4',
								},
								show: {
									autoShow: true, //页面loaded事件发生后自动显示，默认为true
									aniShow: "slide-in-right", //页面显示动画，默认为”slide-in-right“；
									duration: 100 //页面动画持续时间，Android平台默认100毫秒，iOS平台默认200毫秒；
								},
								waiting: {
									autoShow: true, //自动显示等待框，默认为true
									title: '正在加载...', //等待对话框上显示的提示内容
								}
							})  
						  })
							  
							  
				//点击群聊人数
						  mui("#content").on("tap",".numbers",function(){
								mui.openWindow({
									url:'qunmembersub4.html',
									id:"qunmembersub4.html",
									extras: {
									qunid:qunid
									},
								})  
				      })			  
						 //点击群聊昵称
						  mui("#content").on("tap",".groupname",function(){
								mui.openWindow({
									url:'qunnamesub4.html',
									id:"qunnamesub4.html",
									extras: {
									qunid:qunid
									},
								})  
				       })			
						   
						   	 //点击群公告
						    mui("#content").on("tap",".notice",function(){
						   				mui.openWindow({
						   					url:'qunnoticesub4.html',
						   					id:"qunnoticesub4.html",
						   					extras: {
						   					qunid:qunid
						   					},
						   				})  
						   })	
							
								 //点击我在本群的昵称
							 mui("#content").on("tap",".nickname",function(){
											mui.openWindow({
												url:'qunnicknamesub4.html',
												id:"qunnicknamesub4.html",
												extras: {
												qunid:qunid
												},
											})  
							})
			})
		  
			
		</script>


</html>
